<template>
  <div class="flex justify-between items-center w-full">
    <el-input
      style="width: 65%"
      v-model="captchaCode"
      :placeholder="$t('register.captchaCode')"
      autocomplete="off"
    />
    <img
      class="flex-1 h-[40px] cursor-pointer ml-2"
      :src="captchaBase64"
      @click="getCaptcha"
      alt="验证码"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { getCaptchaApi } from "@/api/auth";

// 图形验证
const captchaBase64 = ref<string>("");
const captchaId = defineModel<string>("captchaId");
const captchaCode = defineModel<string>("captchaCode");
const getCaptcha = () => {
  getCaptchaApi().then(({ data }) => {
    captchaId.value = data.captchaId;
    captchaBase64.value = data.base64Image;
  });
};
getCaptcha();
</script>

<style lang="scss" scoped>
img {
  display: block;
}
</style>
